import { cloneDeep } from "lodash";
import type { DSLWidget } from "WidgetProvider/constants";
import {
  tableWidgetPropertyPaneMigrations,
  migrateTableWidgetParentRowSpaceProperty,
  migrateTableWidgetHeaderVisibilityProperties,
  migrateTableWidgetSelectedRowBindings,
  migrateTableSanitizeColumnKeys,
  migrateTableWidgetNumericColumnName,
  migrateTableWidgetV2ValidationBinding,
  migrateTableWidgetV2SelectOption,
  migrateTableWidgetTableDataJsMode,
} from "./TableWidget";

const input1: DSLWidget = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table1",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 19,
      bottomRow: 26,
      parentId: "0",
      widgetId: "fs785w9gcy",
      dynamicBindingPathList: [],
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const input2: DSLWidget = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table2",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 28,
      bottomRow: 35,
      parentId: "0",
      widgetId: "l9i1e8ybkm",
      dynamicBindingPathList: [],
      dynamicTriggerPathList: [{ key: "columnActions" }],
      columnActions: [
        {
          label: "Test",
          id: "ezooq966rd",
          actionPayloads: [],
          dynamicTrigger: "{{showAlert('test','success')}}",
        },
        {
          label: "Fail",
          id: "1k8nkay5r6",
          actionPayloads: [],
          dynamicTrigger: "{{showAlert('Fail','error')}}",
        },
      ],
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const input3: DSLWidget = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table3",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 37,
      bottomRow: 44,
      parentId: "0",
      widgetId: "8mkidz550s",
      dynamicBindingPathList: [],
      dynamicTriggerPathList: [
        { key: "onRowSelected" },
        { key: "onSearchTextChanged" },
      ],
      onRowSelected: "{{showAlert('test','success')}}",
      onSearchTextChanged: "{{showAlert('fail','error')}}",
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const output1 = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table1",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 19,
      bottomRow: 26,
      parentId: "0",
      widgetId: "fs785w9gcy",
      dynamicBindingPathList: [],
      primaryColumns: {
        id: {
          index: 0,
          width: 150,
          id: "id",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "id",
          computedValue: "",
        },
        email: {
          index: 1,
          width: 150,
          id: "email",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "email",
          computedValue: "",
        },
        userName: {
          index: 2,
          width: 150,
          id: "userName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "userName",
          computedValue: "",
        },
        productName: {
          index: 3,
          width: 150,
          id: "productName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "productName",
          computedValue: "",
        },
        orderAmount: {
          index: 4,
          width: 150,
          id: "orderAmount",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "orderAmount",
          computedValue: "",
        },
      },
      textSize: "PARAGRAPH",
      horizontalAlignment: "LEFT",
      verticalAlignment: "CENTER",
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const output2 = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table2",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 28,
      bottomRow: 35,
      parentId: "0",
      widgetId: "l9i1e8ybkm",
      dynamicBindingPathList: [],
      dynamicTriggerPathList: [
        { key: "columnActions" },
        { key: "primaryColumns.customColumn1.onClick" },
        { key: "primaryColumns.customColumn2.onClick" },
      ],
      columnActions: [
        {
          label: "Test",
          id: "ezooq966rd",
          actionPayloads: [],
          dynamicTrigger: "{{showAlert('test','success')}}",
        },
        {
          label: "Fail",
          id: "1k8nkay5r6",
          actionPayloads: [],
          dynamicTrigger: "{{showAlert('Fail','error')}}",
        },
      ],
      primaryColumns: {
        id: {
          index: 0,
          width: 150,
          id: "id",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "id",
          computedValue: "",
        },
        email: {
          index: 1,
          width: 150,
          id: "email",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "email",
          computedValue: "",
        },
        userName: {
          index: 2,
          width: 150,
          id: "userName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "userName",
          computedValue: "",
        },
        productName: {
          index: 3,
          width: 150,
          id: "productName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "productName",
          computedValue: "",
        },
        orderAmount: {
          index: 4,
          width: 150,
          id: "orderAmount",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "orderAmount",
          computedValue: "",
        },
        customColumn1: {
          index: 5,
          width: 150,
          id: "ezooq966rd",
          label: "Test",
          columnType: "button",
          isVisible: true,
          isDerived: true,
          buttonLabel: "Test",
          buttonStyle: "rgb(3, 179, 101)",
          buttonLabelColor: "#FFFFFF",
          onClick: "{{showAlert('test','success')}}",
        },
        customColumn2: {
          index: 6,
          width: 150,
          id: "1k8nkay5r6",
          label: "Fail",
          columnType: "button",
          isVisible: true,
          isDerived: true,
          buttonLabel: "Fail",
          buttonStyle: "rgb(3, 179, 101)",
          buttonLabelColor: "#FFFFFF",
          onClick: "{{showAlert('Fail','error')}}",
        },
      },
      textSize: "PARAGRAPH",
      horizontalAlignment: "LEFT",
      verticalAlignment: "CENTER",
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const output3 = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table3",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 37,
      bottomRow: 44,
      parentId: "0",
      widgetId: "8mkidz550s",
      dynamicBindingPathList: [],
      dynamicTriggerPathList: [
        { key: "onRowSelected" },
        { key: "onSearchTextChanged" },
      ],
      onRowSelected: "{{showAlert('test','success')}}",
      onSearchTextChanged: "{{showAlert('fail','error')}}",
      primaryColumns: {
        id: {
          index: 0,
          width: 150,
          id: "id",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "id",
          computedValue: "",
        },
        email: {
          index: 1,
          width: 150,
          id: "email",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "email",
          computedValue: "",
        },
        userName: {
          index: 2,
          width: 150,
          id: "userName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "userName",
          computedValue: "",
        },
        productName: {
          index: 3,
          width: 150,
          id: "productName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "productName",
          computedValue: "",
        },
        orderAmount: {
          index: 4,
          width: 150,
          id: "orderAmount",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "orderAmount",
          computedValue: "",
        },
      },
      textSize: "PARAGRAPH",
      horizontalAlignment: "LEFT",
      verticalAlignment: "CENTER",
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

describe("Table Widget Property Pane Upgrade", () => {
  it("To test primaryColumns are created for a simple table", () => {
    const newDsl = tableWidgetPropertyPaneMigrations(input1);
    expect(JSON.stringify(newDsl) === JSON.stringify(output1));
  });
  it("To test columnActions are migrated derived primaryColumns", () => {
    const newDsl = tableWidgetPropertyPaneMigrations(input2);
    expect(JSON.stringify(newDsl) === JSON.stringify(output2));
  });
  it("To test table action are migrated", () => {
    const newDsl = tableWidgetPropertyPaneMigrations(input3);
    expect(JSON.stringify(newDsl) === JSON.stringify(output3));
  });

  it("To test table parentRowSpace is updated", () => {
    const inputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1224,
      snapColumns: 16,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 1840,
      containerStyle: "none",
      snapRows: 33,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 7,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      isLoading: false,
      parentId: "",
      renderMode: "CANVAS",
      children: [
        {
          isVisible: true,
          label: "Data",
          widgetName: "Table1",
          searchKey: "",
          tableData:
            '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
          type: "TABLE_WIDGET",
          isLoading: false,
          parentColumnSpace: 74,
          parentRowSpace: 40,
          leftColumn: 0,
          rightColumn: 8,
          topRow: 19,
          bottomRow: 26,
          parentId: "0",
          widgetId: "fs785w9gcy",
          dynamicBindingPathList: [],
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "id",
              computedValue: "",
            },
            email: {
              index: 1,
              width: 150,
              id: "email",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "email",
              computedValue: "",
            },
            userName: {
              index: 2,
              width: 150,
              id: "userName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "userName",
              computedValue: "",
            },
            productName: {
              index: 3,
              width: 150,
              id: "productName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "productName",
              computedValue: "",
            },
            orderAmount: {
              index: 4,
              width: 150,
              id: "orderAmount",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "orderAmount",
              computedValue: "",
            },
          },
          textSize: "PARAGRAPH",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          renderMode: "CANVAS",
          version: 1,
        },
      ],
    };
    const outputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1224,
      snapColumns: 16,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 1840,
      containerStyle: "none",
      snapRows: 33,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 7,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      isLoading: false,
      parentId: "",
      renderMode: "CANVAS",
      children: [
        {
          isVisible: true,
          label: "Data",
          widgetName: "Table1",
          searchKey: "",
          tableData:
            '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
          type: "TABLE_WIDGET",
          isLoading: false,
          parentColumnSpace: 74,
          parentRowSpace: 10,
          leftColumn: 0,
          rightColumn: 8,
          topRow: 19,
          bottomRow: 26,
          parentId: "0",
          widgetId: "fs785w9gcy",
          dynamicBindingPathList: [],
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "id",
              computedValue: "",
            },
            email: {
              index: 1,
              width: 150,
              id: "email",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "email",
              computedValue: "",
            },
            userName: {
              index: 2,
              width: 150,
              id: "userName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "userName",
              computedValue: "",
            },
            productName: {
              index: 3,
              width: 150,
              id: "productName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "productName",
              computedValue: "",
            },
            orderAmount: {
              index: 4,
              width: 150,
              id: "orderAmount",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "orderAmount",
              computedValue: "",
            },
          },
          textSize: "PARAGRAPH",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          renderMode: "CANVAS",
          version: 1,
        },
      ],
    };
    const newDsl = migrateTableWidgetParentRowSpaceProperty(inputDsl);
    expect(JSON.stringify(newDsl) === JSON.stringify(outputDsl));
  });

  it("TableWidget : should update header options visibilities", () => {
    const inputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1224,
      snapColumns: 16,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 1840,
      containerStyle: "none",
      snapRows: 33,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 7,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      isLoading: false,
      parentId: "",
      renderMode: "CANVAS",
      children: [
        {
          isVisible: true,
          label: "Data",
          widgetName: "Table1",
          searchKey: "",
          tableData:
            '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
          type: "TABLE_WIDGET",
          isLoading: false,
          parentColumnSpace: 74,
          parentRowSpace: 40,
          leftColumn: 0,
          rightColumn: 8,
          topRow: 19,
          bottomRow: 26,
          parentId: "0",
          widgetId: "fs785w9gcy",
          dynamicBindingPathList: [],
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "id",
              computedValue: "",
            },
            email: {
              index: 1,
              width: 150,
              id: "email",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "email",
              computedValue: "",
            },
            userName: {
              index: 2,
              width: 150,
              id: "userName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "userName",
              computedValue: "",
            },
            productName: {
              index: 3,
              width: 150,
              id: "productName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "productName",
              computedValue: "",
            },
            orderAmount: {
              index: 4,
              width: 150,
              id: "orderAmount",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "orderAmount",
              computedValue: "",
            },
          },
          textSize: "PARAGRAPH",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          renderMode: "CANVAS",
          version: 1,
        },
      ],
    };
    const outputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1224,
      snapColumns: 16,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 1840,
      containerStyle: "none",
      snapRows: 33,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 7,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      isLoading: false,
      parentId: "",
      renderMode: "CANVAS",
      children: [
        {
          isVisible: true,
          label: "Data",
          widgetName: "Table1",
          searchKey: "",
          tableData:
            '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
          type: "TABLE_WIDGET",
          isLoading: false,
          parentColumnSpace: 74,
          parentRowSpace: 10,
          leftColumn: 0,
          rightColumn: 8,
          topRow: 19,
          bottomRow: 26,
          parentId: "0",
          widgetId: "fs785w9gcy",
          dynamicBindingPathList: [],
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "id",
              computedValue: "",
            },
            email: {
              index: 1,
              width: 150,
              id: "email",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "email",
              computedValue: "",
            },
            userName: {
              index: 2,
              width: 150,
              id: "userName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "userName",
              computedValue: "",
            },
            productName: {
              index: 3,
              width: 150,
              id: "productName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "productName",
              computedValue: "",
            },
            orderAmount: {
              index: 4,
              width: 150,
              id: "orderAmount",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "orderAmount",
              computedValue: "",
            },
          },
          textSize: "PARAGRAPH",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          renderMode: "CANVAS",
          isVisibleSearch: true,
          isVisibleFilters: true,
          isVisibleDownload: true,
          isVisibleCompactMode: true,
          isVisiblePagination: true,
          version: 1,
        },
      ],
    };
    const newDsl = migrateTableWidgetHeaderVisibilityProperties(inputDsl);
    expect(JSON.stringify(newDsl) === JSON.stringify(outputDsl));
  });
});

describe("Table Widget Migration - #migrateTableSanitizeColumnKeys", () => {
  it("sanitizes primaryColumns, dynamicBindingPathList, columnOrder", () => {
    const inputDsl = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1080,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 980,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 34,
      minHeight: 860,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          columnOrder: ["id", "name", "'random_header", "Employee.id"],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 53,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          parentColumnSpace: 14.62421875,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            { key: "tableData" },
            { key: "primaryColumns.id.computedValue" },
            { key: "primaryColumns.name.computedValue" },
            { key: "primaryColumns.'random_header.computedValue" },
            { key: "primaryColumns.Employee.id.computedValue" },
          ],
          leftColumn: 1,
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}",
            },
            name: {
              index: 14,
              width: 150,
              id: "name",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "name",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.name))}}",
            },
            "'random_header": {
              index: 20,
              width: 150,
              id: "'random_header",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "'random_header",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.'random_header))}}",
            },
            "Employee.id": {
              index: 20,
              width: 150,
              id: "Employee.id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "Employee.id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee.id))}}",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 63,
          textSize: "PARAGRAPH",
          widgetId: "oclzovhzgx",
          isVisibleFilters: true,
          tableData: '{{users.data.concat({ "\'random header": 100})}}',
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          parentId: "0",
          totalRecordCount: 0,
          isLoading: false,
          isVisibleCompactMode: true,
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
            email: 261,
          },
        },
      ],
    } as unknown as DSLWidget;

    const outputDsl = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1080,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 980,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 34,
      minHeight: 860,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          columnOrder: ["id", "name", "_random_header", "Employee_id"],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 53,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          parentColumnSpace: 14.62421875,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            { key: "tableData" },
            { key: "primaryColumns.id.computedValue" },
            { key: "primaryColumns.name.computedValue" },
            { key: "primaryColumns._random_header.computedValue" },
            { key: "primaryColumns.Employee_id.computedValue" },
          ],
          leftColumn: 1,
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}",
            },
            name: {
              index: 14,
              width: 150,
              id: "name",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "name",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.name))}}",
            },
            _random_header: {
              index: 20,
              width: 150,
              id: "_random_header",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "'random_header",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._random_header))}}",
            },
            Employee_id: {
              index: 20,
              width: 150,
              id: "Employee_id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "Employee.id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee_id))}}",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 63,
          textSize: "PARAGRAPH",
          widgetId: "oclzovhzgx",
          isVisibleFilters: true,
          tableData: '{{users.data.concat({ "\'random header": 100})}}',
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          parentId: "0",
          totalRecordCount: 0,
          isLoading: false,
          isVisibleCompactMode: true,
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
            email: 261,
          },
        },
      ],
    };

    const badDsl = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1080,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 980,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 34,
      minHeight: 860,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          columnOrder: ["Employee.id"],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 53,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          parentColumnSpace: 14.62421875,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            { key: "tableData" },
            { key: "primaryColumns.Employee.id.computedValue" },
          ],
          leftColumn: 1,
          primaryColumns: {
            "Employee.id": {
              "": {
                index: 20,
                width: 150,
                id: "Employee.id",
                horizontalAlignment: "LEFT",
                verticalAlignment: "CENTER",
                columnType: "text",
                textSize: "PARAGRAPH",
                enableFilter: true,
                enableSort: true,
                isVisible: true,
                isDerived: false,
                label: "Employee.id",
                computedValue:
                  "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee.id))}}",
              },
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 63,
          textSize: "PARAGRAPH",
          widgetId: "oclzovhzgx",
          isVisibleFilters: true,
          tableData: '{{users.data.concat({ "\'random header": 100})}}',
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          parentId: "0",
          totalRecordCount: 0,
          isLoading: false,
          isVisibleCompactMode: true,
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
            email: 261,
          },
        },
      ],
    } as unknown as DSLWidget;

    const fixedDsl = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1080,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 980,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 34,
      minHeight: 860,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          columnOrder: ["Employee_id"],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 53,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          parentColumnSpace: 14.62421875,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            { key: "tableData" },
            { key: "primaryColumns.Employee_id.computedValue" },
          ],
          leftColumn: 1,
          primaryColumns: {
            Employee_id: {
              index: 20,
              width: 150,
              id: "Employee_id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "Employee.id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee_id))}}",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 63,
          textSize: "PARAGRAPH",
          widgetId: "oclzovhzgx",
          isVisibleFilters: true,
          tableData: '{{users.data.concat({ "\'random header": 100})}}',
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          parentId: "0",
          totalRecordCount: 0,
          isLoading: false,
          isVisibleCompactMode: true,
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
            email: 261,
          },
        },
      ],
    };

    const newDsl = migrateTableSanitizeColumnKeys(inputDsl);
    const correctedDsl = migrateTableSanitizeColumnKeys(badDsl);
    expect(newDsl).toStrictEqual(outputDsl);
    expect(correctedDsl).toStrictEqual(fixedDsl);
  });
});

describe("Table Widget selectedRow bindings update", () => {
  it("To test selectedRow bindings are updated for primaryColumns and derivedColumns", () => {
    const inputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1118,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 540,
      containerStyle: "none",
      snapRows: 129,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 36,
      minHeight: 550,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      renderMode: "CANVAS",
      isLoading: false,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 36,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          defaultSelectedRow: "0",
          parentColumnSpace: 17.28125,
          dynamicTriggerPathList: [{ key: "primaryColumns.action.onClick" }],
          dynamicBindingPathList: [
            { key: "primaryColumns.step.computedValue" },
            { key: "primaryColumns.task.computedValue" },
            { key: "primaryColumns.status.computedValue" },
            { key: "primaryColumns.action.computedValue" },
          ],
          leftColumn: 6,
          primaryColumns: {
            step: {
              index: 0,
              width: 150,
              id: "step",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "step",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
            },
            task: {
              index: 1,
              width: 150,
              id: "task",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "task",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
            },
            status: {
              index: 2,
              width: 150,
              id: "status",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "status",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
            },
            action: {
              index: 3,
              width: 150,
              id: "action",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "button",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDisabled: false,
              isDerived: false,
              label: "action",
              onClick: "{{showAlert(Table1.selectedRow.task,'info')}}",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
            },
            customColumn1: {
              index: 4,
              width: 150,
              id: "customColumn1",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "button",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDisabled: false,
              isDerived: true,
              label: "Delete",
              onClick: "{{showAlert('Hello')}}",
              computedValue: "",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 36,
          textSize: "PARAGRAPH",
          widgetId: "yd68qpgb0b",
          isVisibleFilters: true,
          tableData: [
            { step: "#1", task: "Drop a table", status: "✅", action: "" },
            {
              step: "#2",
              task: "Create a query fetch_users with the Mock DB",
              status: "--",
              action: "",
            },
            {
              step: "#3",
              task: "Bind the query using => fetch_users.data",
              status: "--",
              action: "",
            },
          ],
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          totalRecordsCount: 0,
          parentId: "0",
          isLoading: false,
          horizontalAlignment: "LEFT",
          renderMode: "CANVAS",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: { task: 245, step: 62, status: 75 },
        },
      ],
    };
    const newDsl = migrateTableWidgetSelectedRowBindings(inputDsl);
    const outputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1118,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 540,
      containerStyle: "none",
      snapRows: 129,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 36,
      minHeight: 550,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      renderMode: "CANVAS",
      isLoading: false,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 36,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          defaultSelectedRow: "0",
          parentColumnSpace: 17.28125,
          dynamicTriggerPathList: [{ key: "primaryColumns.action.onClick" }],
          dynamicBindingPathList: [
            { key: "primaryColumns.step.computedValue" },
            { key: "primaryColumns.task.computedValue" },
            { key: "primaryColumns.status.computedValue" },
            { key: "primaryColumns.action.computedValue" },
          ],
          leftColumn: 6,
          primaryColumns: {
            step: {
              index: 0,
              width: 150,
              id: "step",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "step",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
            },
            task: {
              index: 1,
              width: 150,
              id: "task",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "task",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
            },
            status: {
              index: 2,
              width: 150,
              id: "status",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "status",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
            },
            action: {
              index: 3,
              width: 150,
              id: "action",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "button",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDisabled: false,
              isDerived: false,
              label: "action",
              onClick: "{{showAlert(currentRow.task,'info')}}",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
            },
            customColumn1: {
              index: 4,
              width: 150,
              id: "customColumn1",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "button",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDisabled: false,
              isDerived: true,
              label: "Delete",
              onClick: "{{showAlert('Hello')}}",
              computedValue: "",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 36,
          textSize: "PARAGRAPH",
          widgetId: "yd68qpgb0b",
          isVisibleFilters: true,
          tableData: [
            { step: "#1", task: "Drop a table", status: "✅", action: "" },
            {
              step: "#2",
              task: "Create a query fetch_users with the Mock DB",
              status: "--",
              action: "",
            },
            {
              step: "#3",
              task: "Bind the query using => fetch_users.data",
              status: "--",
              action: "",
            },
          ],
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          totalRecordsCount: 0,
          parentId: "0",
          isLoading: false,
          horizontalAlignment: "LEFT",
          renderMode: "CANVAS",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: { task: 245, step: 62, status: 75 },
        },
      ],
    };
    expect(newDsl).toStrictEqual(outputDsl);
  });
});

describe("Table Widget numeric column name to string update", () => {
  it("to test numeric column name converted to string and rest column configuration remains same", () => {
    const inputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 816,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 5016,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 50,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      parentId: "",
      renderMode: "CANVAS",
      isLoading: false,
      children: [
        {
          widgetName: "Table1",
          parentColumnSpace: 74,
          defaultPageSize: 0,
          columnOrder: [
            "1",
            "2",
            "_user_",
            "_client_",
            "rowIndex",
            "customColumn1",
            "customColumn2",
          ],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          displayName: "Table",
          iconSVG: "/static/media/icon.db8a9cbd.svg",
          topRow: 1,
          bottomRow: 29,
          isSortable: true,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          defaultSelectedRow: "0",
          hideCard: false,
          animateLoading: true,
          isLoading: false,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            {
              key: "tableData",
            },
            {
              key: "primaryColumns.1.computedValue",
            },
            {
              key: "primaryColumns.2.computedValue",
            },
            {
              key: "primaryColumns._user_.computedValue",
            },
            {
              key: "primaryColumns._client_.computedValue",
            },
            {
              key: "primaryColumns.rowIndex.computedValue",
            },
            {
              key: "derivedColumns.customColumn1.computedValue",
            },
            {
              key: "primaryColumns.customColumn1.computedValue",
            },
            {
              key: "derivedColumns.customColumn2.computedValue",
            },
            {
              key: "primaryColumns.customColumn2.computedValue",
            },
          ],
          leftColumn: 0,
          primaryColumns: {
            "1": {
              index: 0,
              width: 150,
              id: "1",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "ONE",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.1))}}",
            },
            "2": {
              index: 1,
              width: 150,
              id: "2",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "TWO",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.2))}}",
            },
            _user_: {
              index: 2,
              width: 150,
              id: "_user_",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "USER",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._user_))}}",
            },
            _client_: {
              index: 3,
              width: 150,
              id: "_client_",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "CLIENT",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._client_))}}",
            },
            rowIndex: {
              index: 4,
              width: 150,
              id: "rowIndex",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "rowIndex",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex))}}",
            },
            customColumn1: {
              index: 5,
              width: 150,
              id: "customColumn1",
              columnType: "text",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: true,
              label: "Custom Column 1",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.customColumn1))}}",
              buttonStyle: "rgb(3, 179, 101)",
              buttonLabelColor: "#FFFFFF",
              buttonColor: "#03B365",
              menuColor: "#03B365",
              labelColor: "#FFFFFF",
            },
            customColumn2: {
              index: 6,
              width: 150,
              id: "customColumn2",
              columnType: "text",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: true,
              label: "Custom Label",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.customColumn2))}}",
              buttonStyle: "rgb(3, 179, 101)",
              buttonLabelColor: "#FFFFFF",
              buttonColor: "#03B365",
              menuColor: "#03B365",
              labelColor: "#FFFFFF",
            },
          },
          delimiter: ",",
          key: "d0akgsw2t4",
          derivedColumns: {
            customColumn1: {
              index: 5,
              width: 150,
              id: "customColumn1",
              columnType: "text",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: true,
              label: "Custom Column 1",
              computedValue:
                '{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex + " CC1"))}}',
              buttonStyle: "rgb(3, 179, 101)",
              buttonLabelColor: "#FFFFFF",
              buttonColor: "#03B365",
              menuColor: "#03B365",
              labelColor: "#FFFFFF",
            },
            customColumn2: {
              index: 6,
              width: 150,
              id: "customColumn2",
              columnType: "text",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: true,
              label: "Custom Label",
              computedValue:
                '{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex + " CC1"))}}',
              buttonStyle: "rgb(3, 179, 101)",
              buttonLabelColor: "#FFFFFF",
              buttonColor: "#03B365",
              menuColor: "#03B365",
              labelColor: "#FFFFFF",
            },
          },
          rightColumn: 34,
          textSize: "PARAGRAPH",
          widgetId: "v3kdn1uyjb",
          isVisibleFilters: true,
          tableData: "{{Api2.data}}",
          isVisible: true,
          label: "Data",
          searchKey: "",
          enableClientSideSearch: true,
          version: 3,
          totalRecordsCount: 0,
          parentId: "0",
          renderMode: "CANVAS",
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
          },
        },
      ],
    };
    // using cloneDeep, create new reference of inputDsl
    // otherwise migration function will modify inputDsl too
    const newDsl = migrateTableWidgetNumericColumnName(cloneDeep(inputDsl));
    const outputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 816,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 5016,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 50,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      parentId: "",
      renderMode: "CANVAS",
      isLoading: false,
      children: [
        {
          widgetName: "Table1",
          parentColumnSpace: 74,
          defaultPageSize: 0,
          columnOrder: [
            "_1",
            "_2",
            "_user_",
            "_client_",
            "rowIndex",
            "customColumn1",
            "customColumn2",
          ],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          displayName: "Table",
          iconSVG: "/static/media/icon.db8a9cbd.svg",
          topRow: 1,
          bottomRow: 29,
          isSortable: true,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          defaultSelectedRow: "0",
          hideCard: false,
          animateLoading: true,
          isLoading: false,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            {
              key: "tableData",
            },
            {
              key: "primaryColumns._1.computedValue",
            },
            {
              key: "primaryColumns._2.computedValue",
            },
            {
              key: "primaryColumns._user_.computedValue",
            },
            {
              key: "primaryColumns._client_.computedValue",
            },
            {
              key: "primaryColumns.rowIndex.computedValue",
            },
            {
              key: "derivedColumns.customColumn1.computedValue",
            },
            {
              key: "primaryColumns.customColumn1.computedValue",
            },
            {
              key: "derivedColumns.customColumn2.computedValue",
            },
            {
              key: "primaryColumns.customColumn2.computedValue",
            },
          ],
          leftColumn: 0,
          primaryColumns: {
            _1: {
              index: 0,
              width: 150,
              id: "_1",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "ONE",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._1))}}",
            },
            _2: {
              index: 1,
              width: 150,
              id: "_2",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "TWO",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._2))}}",
            },
            _user_: {
              index: 2,
              width: 150,
              id: "_user_",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "USER",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._user_))}}",
            },
            _client_: {
              index: 3,
              width: 150,
              id: "_client_",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "CLIENT",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._client_))}}",
            },
            rowIndex: {
              index: 4,
              width: 150,
              id: "rowIndex",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "rowIndex",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex))}}",
            },
            customColumn1: {
              index: 5,
              width: 150,
              id: "customColumn1",
              columnType: "text",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: true,
              label: "Custom Column 1",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.customColumn1))}}",
              buttonStyle: "rgb(3, 179, 101)",
              buttonLabelColor: "#FFFFFF",
              buttonColor: "#03B365",
              menuColor: "#03B365",
              labelColor: "#FFFFFF",
            },
            customColumn2: {
              index: 6,
              width: 150,
              id: "customColumn2",
              columnType: "text",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: true,
              label: "Custom Label",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.customColumn2))}}",
              buttonStyle: "rgb(3, 179, 101)",
              buttonLabelColor: "#FFFFFF",
              buttonColor: "#03B365",
              menuColor: "#03B365",
              labelColor: "#FFFFFF",
            },
          },
          delimiter: ",",
          key: "d0akgsw2t4",
          derivedColumns: {
            customColumn1: {
              index: 5,
              width: 150,
              id: "customColumn1",
              columnType: "text",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: true,
              label: "Custom Column 1",
              computedValue:
                '{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex + " CC1"))}}',
              buttonStyle: "rgb(3, 179, 101)",
              buttonLabelColor: "#FFFFFF",
              buttonColor: "#03B365",
              menuColor: "#03B365",
              labelColor: "#FFFFFF",
            },
            customColumn2: {
              index: 6,
              width: 150,
              id: "customColumn2",
              columnType: "text",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: true,
              label: "Custom Label",
              computedValue:
                '{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.rowIndex + " CC1"))}}',
              buttonStyle: "rgb(3, 179, 101)",
              buttonLabelColor: "#FFFFFF",
              buttonColor: "#03B365",
              menuColor: "#03B365",
              labelColor: "#FFFFFF",
            },
          },
          rightColumn: 34,
          textSize: "PARAGRAPH",
          widgetId: "v3kdn1uyjb",
          isVisibleFilters: true,
          tableData: "{{Api2.data}}",
          isVisible: true,
          label: "Data",
          searchKey: "",
          enableClientSideSearch: true,
          version: 3,
          totalRecordsCount: 0,
          parentId: "0",
          renderMode: "CANVAS",
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
          },
        },
      ],
    };

    expect(newDsl).toStrictEqual(outputDsl);
  });
});

const oldBindingPrefix = `{{
  (
    (editedValue, currentRow, currentIndex) => (
`;
const newBindingPrefix = `{{
  (
    (editedValue, currentRow, currentIndex, isNewRow) => (
`;

const oldBindingSuffix = (tableId: string, columnName: string) => `
  ))
  (
    ${tableId}.columnEditableCellValue.${columnName} || "",
    ${tableId}.processedTableData[${tableId}.editableCell.index] ||
      Object.keys(${tableId}.processedTableData[0])
        .filter(key => ["__originalIndex__", "__primaryKey__"].indexOf(key) === -1)
        .reduce((prev, curr) => {
          prev[curr] = "";
          return prev;
        }, {}),
    ${tableId}.editableCell.index)
}}
`;
const newBindingSuffix = (tableId: string, columnName: string) => {
  return `
    ))
    (
      (${tableId}.isAddRowInProgress ? ${tableId}.newRow.${columnName} : ${tableId}.columnEditableCellValue.${columnName}) || "",
      ${tableId}.isAddRowInProgress ? ${tableId}.newRow : (${tableId}.processedTableData[${tableId}.editableCell.index] ||
        Object.keys(${tableId}.processedTableData[0])
          .filter(key => ["__originalIndex__", "__primaryKey__"].indexOf(key) === -1)
          .reduce((prev, curr) => {
            prev[curr] = "";
            return prev;
          }, {})),
      ${tableId}.isAddRowInProgress ? -1 : ${tableId}.editableCell.index,
      ${tableId}.isAddRowInProgress
    )
  }}
  `;
};

describe("migrateTableWidgetV2ValidationBinding", () => {
  const binding = "true";

  it("should test that binding of isColumnEditableCellValid is getting updated", () => {
    expect(
      migrateTableWidgetV2ValidationBinding({
        children: [
          {
            widgetName: "Table",
            type: "TABLE_WIDGET_V2",
            primaryColumns: {
              step: {
                validation: {
                  isColumnEditableCellValid: `${oldBindingPrefix}${binding}${oldBindingSuffix(
                    "Table",
                    "step",
                  )}`,
                },
              },
            },
          },
        ],
      } as any as DSLWidget),
    ).toEqual({
      children: [
        {
          widgetName: "Table",
          type: "TABLE_WIDGET_V2",
          primaryColumns: {
            step: {
              validation: {
                isColumnEditableCellValid: `${newBindingPrefix}${binding}${newBindingSuffix(
                  "Table",
                  "step",
                )}`,
              },
            },
          },
        },
      ],
    });
  });
});

describe("migrateTableWidgetV2SelectOption", () => {
  it("should test that binding of selectOption is getting updated", () => {
    expect(
      migrateTableWidgetV2SelectOption({
        children: [
          {
            widgetName: "Table",
            type: "TABLE_WIDGET_V2",
            primaryColumns: {
              step: {
                columnType: "select",
                selectOptions: "[{label: 1, value: 2}]",
              },
              task: {
                columnType: "select",
                selectOptions: "{{[{label: 1, value: 2}]}}",
              },
              status: {
                columnType: "text",
                selectOptions: "{{[{label: 1, value: 2}]}}",
              },
            },
          },
        ],
      } as any as DSLWidget),
    ).toEqual({
      children: [
        {
          widgetName: "Table",
          type: "TABLE_WIDGET_V2",
          primaryColumns: {
            step: {
              columnType: "select",
              selectOptions: "[{label: 1, value: 2}]",
            },
            task: {
              columnType: "select",
              selectOptions:
                "{{Table.processedTableData.map((currentRow, currentIndex) => ( [{label: 1, value: 2}]))}}",
            },
            status: {
              columnType: "text",
              selectOptions: "{{[{label: 1, value: 2}]}}",
            },
          },
        },
      ],
    });
  });
});

describe("migrateTableWidgetTableDataJsMode", () => {
  it("should test that tableData js mode is enabled", () => {
    expect(
      migrateTableWidgetTableDataJsMode({
        children: [
          {
            widgetName: "Table",
            type: "TABLE_WIDGET_V2",
            primaryColumns: {
              step: {
                columnType: "select",
                selectOptions: "[{label: 1, value: 2}]",
              },
              task: {
                columnType: "select",
                selectOptions: "{{[{label: 1, value: 2}]}}",
              },
              status: {
                columnType: "text",
                selectOptions: "{{[{label: 1, value: 2}]}}",
              },
            },
          },
          {
            widgetName: "Table1",
            type: "TABLE_WIDGET_V2",
            primaryColumns: {
              step: {
                columnType: "select",
                selectOptions: "[{label: 1, value: 2}]",
              },
              task: {
                columnType: "select",
                selectOptions: "{{[{label: 1, value: 2}]}}",
              },
              status: {
                columnType: "text",
                selectOptions: "{{[{label: 1, value: 2}]}}",
              },
            },
            dynamicPropertyPathList: [{ key: "test" }],
          },
          {
            widgetName: "Text",
            type: "TEXT_WIDGET",
            dynamicPropertyPathList: [{ key: "test" }],
          },
        ],
      } as any as DSLWidget),
    ).toEqual({
      children: [
        {
          widgetName: "Table",
          type: "TABLE_WIDGET_V2",
          primaryColumns: {
            step: {
              columnType: "select",
              selectOptions: "[{label: 1, value: 2}]",
            },
            task: {
              columnType: "select",
              selectOptions: "{{[{label: 1, value: 2}]}}",
            },
            status: {
              columnType: "text",
              selectOptions: "{{[{label: 1, value: 2}]}}",
            },
          },
          dynamicPropertyPathList: [{ key: "tableData" }],
        },
        {
          widgetName: "Table1",
          type: "TABLE_WIDGET_V2",
          primaryColumns: {
            step: {
              columnType: "select",
              selectOptions: "[{label: 1, value: 2}]",
            },
            task: {
              columnType: "select",
              selectOptions: "{{[{label: 1, value: 2}]}}",
            },
            status: {
              columnType: "text",
              selectOptions: "{{[{label: 1, value: 2}]}}",
            },
          },
          dynamicPropertyPathList: [{ key: "test" }, { key: "tableData" }],
        },
        {
          widgetName: "Text",
          type: "TEXT_WIDGET",
          dynamicPropertyPathList: [{ key: "test" }],
        },
      ],
    });
  });
});
